<template>
  <div class="notice-setting-container">
    <SectionTitle :is-dot="noticeStatus" title="通知模板摘要配置">
      <InfoIcon content="至少勾选一项，最多勾选10项" />
      <span class="title-tip">(待办中心摘要、飞书、钉钉通知字段配置)</span>
    </SectionTitle>
    <SettingGraggable v-if="configFields.length" v-model="configFields" :max-select-num="10" check-key="isNotice" @getCurSelectedNum="getCurSelectedNum" />
    <EmptyPlaceholder v-else :empty-text-top="0" text="暂无可配置字段" />
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import SettingGraggable from './settingGraggable';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import { EventBus } from '@/utils/eventBus';
import { forEachFormOptions } from '@/utils/formMakeUtils.js';
import { noticeTargets } from './settingTargets';

export default {
  name: 'NoticeSetting',
  components: {
    SectionTitle,
    EmptyPlaceholder,
    SettingGraggable
  },
  props: {
    notice: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      noticeStatus: false,
      configFields: []
    };
  },
  watch: {
    notice: {
      handler: function(val) {
        this.noticeStatus = !val.length ? true : val.filter(it => it.isCheck).length < 1;
      }
    }
  },
  created() {
    EventBus.$on('formOptionsChange', configObj => {
      this.setNoticeFields(configObj);
    });
    this.statusCheck();
  },
  methods: {
    statusCheck() {
      const noticeNum = this.configFields.reduce((pre, curr) => pre + (curr['isShow'] ? 1 : 0), 0);
      this.noticeStatus = noticeNum < 1;
    },
    getData() {
      return this.configFields.map(field => {
        return {
          key: field.key,
          name: field.name,
          isCheck: !!field.isNotice
        };
      });
    },
    setData(list, formList) {
      if (Array.isArray(list) && list.length) {
        const allNoticeField = [];
        forEachFormOptions(formList, (item) => {
          if (noticeTargets.includes(item.type)) {
            allNoticeField.push(item);
            const hasFields = list.some(i => i.key === item.key);
            !hasFields && list.push(item);
          }
        }, { notForEachSubform: true });
        // 删除不在表单设计中的字段
        const delArr = _.differenceBy(list, allNoticeField, 'key');
        _.pullAllBy(list, delArr, 'key');
        this.configFields = list.map(item => {
          item.isNotice = !!item.isCheck;
          delete item.isCheck;
          return item;
        });
      }
    },
    getCurSelectedNum(num) {
      this.noticeStatus = num < 1;
      this.$emit('statusCheck');
    },
    // 通知字段设置
    setNoticeFields(configObj) {
      const optionType = configObj.data.type;
      const eventType = configObj.type;
      if (!noticeTargets.includes(optionType) && optionType !== 'grid') return;
      if (optionType === 'grid' && eventType !== 'remove') return;
      if (eventType === 'add') { // 字段增加
        this.configFields.push(configObj.data);
      } else if (eventType === 'remove') { // 字段删除
        if (optionType === 'grid') {
          const allGridFieldKeys = [];
          const { columns } = configObj.data;
          columns && columns.forEach(column => {
            column.list && column.list.forEach(item => {
              allGridFieldKeys.push(item.key);
            });
          });
          this.configFields = this.configFields.filter(item => !allGridFieldKeys.includes(item.key));
        } else {
          const findIndex = this.configFields.findIndex(item => item.key === configObj.data.key);
          findIndex !== -1 && this.configFields.splice(findIndex, 1);
        }
      } else if (eventType === 'changeName') { // 字段名称改变
        const findIndex = this.configFields.findIndex(item => item.key === configObj.data.key);
        if (findIndex !== -1) {
          configObj.data.isNotice = this.configFields[findIndex].isNotice;
          this.configFields.splice(findIndex, 1, configObj.data);
        }
      }
    },
    validate() {
      const selectNum = this.configFields.reduce((pre, curr) => pre + (curr['isNotice'] ? 1 : 0), 0);
      return selectNum < 1;
    },
    // 至少需要勾选一项
    validateForm() {
      return new Promise((resolve, reject) => {
        // 列表字段配置项勾选数量
        const selectNum = this.configFields.reduce((pre, curr) => pre + (curr['isNotice'] ? 1 : 0), 0);
        if (selectNum < 1) {
          reject('请勾选高级设置-通知模板摘要配置');
          return;
        }
        resolve(true);
      });
    },
    initList(list) {
      this.configFields = [];
      forEachFormOptions(list, (item) => {
        if (noticeTargets.includes(item.type)) {
          this.configFields.push(item);
        }
      }, { notForEachSubform: true });
    }
  }
};
</script>

<style scoped lang="scss">
.notice-setting-container {
  .title-tip {
    font-size: 14px;
    color: #999;
    font-weight: normal;
    margin-left: 6px;
  }
  .el-icon-info{
    margin-left: 2px;
  }
  .el-icon-info:hover {
    color: #406EFF;
  }
}
</style>
